<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./code/chapter/19_paint.js"></script>
</head>

<body>
    <div></div>
    <script>
        function circle(pos, state, dispatch) {
            function drawCircle(to) {
                let radius = Math.sqrt(Math.pow(to.x - pos.x, 2) +
                    Math.pow(to.y - pos.y, 2));
                let radiusC = Math.ceil(radius);
                let drawn = [];
                for (let dy = -radiusC; dy <= radiusC; dy++) {
                    for (let dx = -radiusC; dx <= radiusC; dx++) {
                        let dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
                        if (dist > radius) continue;
                        let y = pos.y + dy, x = pos.x + dx;
                        if (y < 0 || y >= state.picture.height ||
                            x < 0 || x >= state.picture.width) continue;
                        drawn.push({ x, y, color: state.color });
                    }
                }
                dispatch({ picture: state.picture.draw(drawn) });
            }
            drawCircle(pos);
            return drawCircle;
        }

        let dom = startPixelEditor({
            tools: Object.assign({}, baseTools, { circle })
        });
        document.querySelector("div").appendChild(dom);
    </script>
</body>

</html>